<template>
    <div class="login-container">
      <div class="login-box">
        <h2>用户登录</h2>
        <input v-model="user.username" type="text" placeholder="用户名" @focus="inputFocus" @blur="inputBlur" />
        <input v-model="user.password" type="password" placeholder="密码" @focus="inputFocus" @blur="inputBlur" />
        <button @click="handleLogin" class="login-btn">登录</button>
        <p class="register-text">
          <router-link to="/register" class="register-link">
            还没有账号？点此注册
          </router-link>
        </p>
      </div>
    </div>
  </template>
  
  <script setup>
import { reactive,inject } from 'vue';

import websocket from '@/services/websocket';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/userStore'

const userStore = useUserStore()

const router = useRouter()

// 注入父组件提供的 state 对象
const state = inject('state');

const user = reactive({
  username: '',
  password: ''
})

// 登录处理函数
const handleLogin = () => {
    const usernameCopy = user.username;
    const message = {
    sequenceId: state.sequenceId++, // 使用全局的 sequenceId，并自增
    messageType: 0,
    username: user.username, 
    password: user.password  
  };
  // 发送消息
  websocket.sendMessage(message, (response) => {
  console.log('收到服务器响应:', response);
  if(response.success===true){
    router.push('/main')
     //开启心跳检测
     userStore.setUsername(message.username)
     websocket.startHeartbeat()

    console.log(response.reason)
    ElMessage.success('登录成功')
    
  }else{
    console.log(response.reason)
    ElMessage.error('用户名或密码错误')
  }

});
  
};

// 输入框获得焦点时
const inputFocus = (event) => {
  event.target.classList.add('focus');
};

// 输入框失去焦点时
const inputBlur = (event) => {
  event.target.classList.remove('focus');
};
</script>

  
  <style scoped>
  /* 背景和布局设置 */
  .login-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #585e5d, #38ef7d);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    animation: fadeIn 1s ease-out;
  }
  
  .login-box {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 50px 40px;
    border-radius: 12px;
    width: 400px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
    text-align: center;
    color: #fff;
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards;
  }
  
  .login-box h2 {
    margin-bottom: 30px;
    font-size: 24px;
    animation: slideIn 0.5s ease-out;
  }
  
  /* 输入框样式 */
  .login-box input {
    width: 100%;
    padding: 12px;
    margin: 12px 0;
    border: 2px solid #fff;
    border-radius: 6px;
    font-size: 16px;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    transition: all 0.3s ease;
  }
  
  .login-box input.focus {
    border-color: #1abc9c; /* 获取焦点时边框颜色 */
    box-shadow: 0 0 10px rgba(26, 188, 156, 0.7);
  }
  
  /* 登录按钮样式 */
  .login-box button {
    width: 100%;
    padding: 12px;
    background-color: #1abc9c;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    margin-top: 20px;
    transition: background-color 0.3s, transform 0.2s;
  }
  
  .login-box button:hover {
    background-color: #16a085;
    transform: translateY(-5px); /* 按钮悬停时轻微上移 */
  }
  
  .login-box button:active {
    background-color: #1abc9c;
    transform: translateY(2px); /* 按钮点击时略微下移 */
  }
  
  /* 注册链接样式 */
  .register-text {
    margin-top: 20px;
    text-align: center;
    color: #ddd;
  }
  
  .register-link {
    text-decoration: none;
    color: #1abc9c;
  }
  
  .register-link:hover {
    color: #16a085;
    text-decoration: underline;
  }
  
  /* 动画效果 */
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes slideIn {
    0% {
      transform: translateX(-20px);
    }
    100% {
      transform: translateX(0);
    }
  }
  </style>
  
  
  